<template>
  <div id="information" class="bg-grey">
    <van-cell-group class="margin-b-10">
      <van-cell title="用户名" :value="origin.username" title-class="left-title"/>
      <van-cell title="姓名" :value="origin.name" title-class="left-title"/>
      <van-cell title="所属部门" :value="origin.department" title-class="left-title"/>
      <van-cell title="所属岗位" :value="origin.position" title-class="left-title"/>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="性别" :value="userinfo.sex" title-class="left-title" 
      @click="sexClick" :is-link="editType?false:true"/>

      <van-cell title="出生日期" :value="userinfo.birthday" title-class="left-title"
      @click="dayClick" :is-link="editType?false:true"/>

      <van-field label="手机" input-align="right" type="tel" v-model.trim="userinfo.mobile_phone" 
      label-class="left-title" :readonly="editType" :right-icon="editType?'':'arrow'"/>

      <van-field label="联系电话" input-align="right" v-model.trim="userinfo.phone" 
      label-class="left-title" :readonly="editType" :right-icon="editType?'':'arrow'"/>

      <van-field label="电子邮件" input-align="right" v-model.trim="userinfo.email" 
      label-class="left-title" :readonly="editType" :right-icon="editType?'':'arrow'"/>

      <van-field label="QQ" input-align="right" type="digit" v-model.trim="userinfo.qq" 
      label-class="left-title" :readonly="editType" :right-icon="editType?'':'arrow'"/>

      <van-field label="联系地址" input-align="right" v-model.trim="userinfo.address" 
      label-class="left-title" :readonly="editType" :right-icon="editType?'':'arrow'"/>
    </van-cell-group>

    <div class="info_btn">
      <van-row v-if="editType">
        <van-button class="default-class" size="large" type="default" icon="edit" 
        @click="editChange">
          编辑
        </van-button>
      </van-row>
      <van-row v-if="!editType">
        <van-col span="11">
          <van-button class="default-class" size="large" type="default" @click="submitCancel">
            取消
          </van-button>
        </van-col>
        <van-col span="13">
          <van-button type="info" size="large" @click="submitConfirm">提交</van-button>
        </van-col>
      </van-row>
    </div>

    <!-- 各类选择器  默认不显示 -->
    <div v-if="!editType">
      <!-- 性别选择器 -->
      <van-popup v-model="sexShow" position="bottom" @click-overlay="closeSexPopup">
        <van-picker :columns="sexs" :default-index="defaultsex" show-toolbar 
        @cancel="closeSexPopup" @confirm="sexConfirm"/>
      </van-popup>
      <!-- 出生日期选择 -->
      <van-popup v-model="dateShow" position="bottom" @click-overlay="closeDataPopup">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="dayConfirm"
          @cancel="closeDataPopup"
        />
      </van-popup>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        origin: {},        //保留一个原有的数据
        userinfo:{
          sex: '',
          birthday: '',
          mobile_phone: '',
          phone: '',
          email: '',
          qq: '',
          address: '',
        },
        editType: true,    //默认显示编辑按钮
        sexs:['男','女'],
        defaultsex: 0,     //默认是‘男’
        sexShow: false,
        minDate: new Date(1900, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        dateShow: false,
        addressShow: false
      }
    },
    activated() {
      this.userinfo = {
        sex: '',
        birthday: '',
        mobile_phone: '',
        phone: '',
        email: '',
        qq: '',
        address: '',
      }
      this.$bridge.callHandler('navTitle', {title: '我的资料'})
      this.showInfo()
    },
    methods: {
      /**
       * 显示信息
       * @return {[type]} [description]
       */
      showInfo() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}user_info/user_info.php`,
          data: {
            do: "detail",
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.origin = res.data
          this.userinfo.sex = res.data.sex
          this.userinfo.birthday = res.data.birthday == '0000-00-00'?'':res.data.birthday
          this.userinfo.mobile_phone = res.data.mobile_phone
          this.userinfo.phone = res.data.phone
          this.userinfo.email = res.data.email
          this.userinfo.qq = res.data.qq
          this.userinfo.address = res.data.address
          if (res.data.sex == '男') {
            this.defaultsex = 0;
          } else if (res.data.sex == '女') {
            this.defaultsex = 1;
          } else {
            this.defaultsex = 0;
          }
          if (res.data.birthday) {
            this.currentDate = new Date(res.data.birthday);
          } else {
            this.currentDate = new Date();
          }
          console.log(this.currentDate)
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 点击编辑按钮
       * @return {[type]} [description]
       */
      editChange() {
        this.editType = false
      },
      /**
       * 点击-性别
       * @return {[type]} [description]
       */
      sexClick() {
        if (!this.editType) {
          this.$bridge.callHandler('navKeepView')
          this.sexShow = true;
        }
      },
      /**
       * 性别选择器
       * @return {[type]} [description]
       */
      sexConfirm(value, index) {
        console.log(value)
        this.$bridge.callHandler('cancelNavKeepView')
        this.userinfo.sex = value;
        this.sexShow = false;
      },
      /**
       * 关闭 性别选择器
       * @return {[type]} [description]
       */
      closeSexPopup() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.sexShow = false
      },
      /**
       * 出生日期 点击
       * @return {[type]} [description]
       */
      dayClick() {
        if (!this.editType) {
          this.$bridge.callHandler('navKeepView')
          if (this.userinfo.birthday) {
            this.currentDate = new Date(this.userinfo.birthday)
          }
          this.dateShow = true
        }
      },
      /**
       * 日期确认
       * @return {[type]} [description]
       */
      dayConfirm(e) {
        this.$bridge.callHandler('cancelNavKeepView')
        this.$bridge.callHandler('cancelNavKeepView')
        this.currentDate = this.$common.formatTime(e.valueOf(),'Y-M-D');
        this.userinfo.birthday = this.$common.formatTime(e.valueOf(),'Y-M-D');
        this.dateShow = false;
      },
      /**
       * 关闭 日期弹出框
       * @return {[type]} [description]
       */
      closeDataPopup() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.dateShow = false;
      },
      /**
       * 地址 点击
       * @return {[type]} [description]
       */
      addressClick() {
        this.addressShow = true;
      },
      /**
       * 取消提交
       * @return {[type]} [description]
       */
      submitCancel() {
        this.editType = true;
      },
      /**
       * 提交数据
       * @return {[type]} [description]
       */
      submitConfirm() {
        console.log(this.userinfo)
        let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (this.userinfo.mobile_phone && !this.$common.mobileReg.test(this.userinfo.mobile_phone)) {
          this.$toast({
            type: 'fail',
            message: '手机号不正确'
          })
        } else if (this.userinfo.email && !reg.test(this.userinfo.email)) {
          this.$toast({
            type: 'fail',
            message: '邮件地址不正确'
          })
        } else if (this.userinfo.qq && !this.$common.number.test(this.userinfo.qq)) {
          this.$toast({
            type: 'fail',
            message: 'QQ号不正确'
          })
        } else {
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: 'post',
            url: `${this.$common.basePath}aatp5/public/index.php/users/Index/index`,
            data: {
              user_id: this.$store.state.userId,
              sex: this.userinfo.sex,
              mobile_phone: this.userinfo.mobile_phone,
              phone: this.userinfo.phone,
              birthday: this.userinfo.birthday,
              email: this.userinfo.email,
              qq: this.userinfo.qq,
              address: this.userinfo.address
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type: 'success',
              message: '信息修改成功',
              forbidClick: true
            })
            setTimeout(_ => {
              this.showInfo();
              this.editType = true;
            },2000)
          }).catch(err => {
            this.$toast.clear()
            this.$toast(err.msg)
          })
        }
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .bg-grey {
    background-color: #F5F5F5;
    height: 100vh;
  }
  .margin-b-10{
    margin-bottom: 10px;
  }
  .van-cell{
    line-height: 35px;
    font-size: 15px;
    padding: 5px 15px;
  }
  .info_btn {
    margin-top: 10px;
    padding: 3px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
  }
  .default-class {
    border: none;
    color: #2E79FF;
  }
</style>
<style type="text/css" lang="less">
  #information{
    .left-title{
      color: #999999;
      max-width: 100px;
    }
    .van-cell__left-icon, .van-cell__right-icon {
      height: 35px;
      line-height: 35px;
    }
  }
</style>